<!DOCTYPE html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>No JS Side Nav</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
        body {
            margin: 0;
            font-family: 'Montserrat', sans-serif;
        }
        #menu {
            position: fixed;
            top: 0;
            height: 100%;
            width: 80%;
            max-width: 400px;
        }
        #menu ul {
            margin: 0;
            background: #2980b9;
            list-style: none;
            padding: 16px;
        }
        #menu ul li {
            font-size: 24px;
        }
        #menu ul li a {
            color: white;
            text-decoration: none;
        }
        #container a.open-menu {
            font-size: 24px;
            background: #16a085;
            color: white;
            padding: 16px 32px;
            text-decoration: none;
            display: block;
            width: 140px;
            text-align: center;
            margin: 200px;
        }
        #container a.close-menu {
            font-size: 24px;
            background: #16a085;
            color: white;
            padding: 16px 32px;
            text-decoration: none;
            display: block;
            width: 140px;
            text-align: center;
            margin: 200px;
        }
        #container:not(:target) #menu {
            right: -100%;
            transition: right 1.5s;
        }
        #container:not(:target) .close-menu {
            display: none;
        }
        #container:target #menu {
            right: 0%;
            transition: right 1.5s;
        }
        #container:target .open-menu {
            display: none;
        }
        </style>

        <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="container">
            <a class="open-menu" href="#container">OPEN</a>
            <a class="close-menu" href="#">CLOSE</a>

            <section id="menu">
                <ul>
                    <li><a href="#">First</a></li>
                    <li><a href="#">Second</a></li>
                    <li><a href="#">Third</a></li>
                    <li><a href="#">Fourth</a></li>
                    <li><a href="#">Fifth</a></li>
                    <li><a href="#">Sixth</a></li>
                </ul>
            </section>
        </div>
    </body>
</html>
